<template>
  <div>
    <h3>订单管理</h3>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="-1"></el-tab-pane>
      <el-tab-pane label="待支付" name="0"></el-tab-pane>
      <el-tab-pane label="已关闭" name="1"></el-tab-pane>
      <el-tab-pane label="待确认" name="2"></el-tab-pane>
      <el-tab-pane label="学习中" name="3"></el-tab-pane>
      <el-tab-pane label="已完成" name="4"></el-tab-pane>
      <div class="search">
        <div class="userSearch jiapd">
          <span class="demon">输入搜索</span>
          <el-input v-model="search" placeholder="请输入内容"></el-input>
        </div>

        <div class="block jiapd">
          <span class="demon">上次消费时间</span>
          <el-date-picker v-model="value1" type="date" placeholder="开始日期"></el-date-picker>
          <span class="xian"></span>
          <el-date-picker v-model="value2" type="date" placeholder="结束日期"></el-date-picker>
        </div>
        <el-button type="primary jiapd" @click="searchBtn">查询</el-button>
        <el-button class="jiapd" @click="resetinput(search)">重置</el-button>
      </div>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: "",
      activeName: "-1",
      input: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: "",
      value2: ""
    };
  },
  methods: {
    searchBtn() {
      this.$emit("parentFun", this.search);
    },
    handleClick(tab, event) {
      this.$emit("stateFun", tab.name * 1);
    },
    resetinput(search) {
      this.search = "";
      this.$parent.getData(this.$parent.uid);
    }
  }
};
</script>

<style  lang='less' scoped>
h3 {
  font-size: 20px;
  vertical-align: middle;
}
/deep/.el-tabs__header {
  margin: 0;
}
/deep/.el-tabs__item {
  padding-right: 60px;
  font-size: 16px;
}
/deep/.el-tabs--top {
  margin: 20px 0;
  height: 150px;
  background-color: #fff;
}
/deep/ .el-tabs__nav-scroll {
  margin-left: 70px;
  padding-top: 20px;
}
.search {
  display: flex;
  padding-top: 26px;
  padding-bottom: 30px;
  .userSearch {
    display: flex;
    // align-content: center;
    // justify-content: center;
    margin-left: 30px;
  }
  .demon {
    width: 86px;
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
    line-height: 32px;
  }
  .xian {
    display: inline-block;
    width: 10px;
    height: 1px;
    background: rgba(153, 153, 153, 0.5);
    line-height: 32px;
    margin: 5px;
  }
  .jiapd {
    margin-right: 30px;
  }
}
</style>